<template>
  <div class="box">
    <el-container style="height: 100%">
      <el-header class="header">
        <el-input v-model="keyword" clearable
                  class="searchInput shadow" prefix-icon="search" size="large"
                  placeholder="Search Input"/>
      </el-header>
      <el-main class="content">
        <el-scrollbar @scroll="scrollerEvent" ref="scrollbarRef">
          <div class="directory plus shadow" @click="add">
            <Plus style="width: 1.5em;height: 1.5em;"/>
          </div>
          <div v-for="item of contentList" :key="item.id" class="directory icons shadow"
               :class="{'choice':item.id===store.state.content.currentId}"
               @click="choice(item.id)">
            <p class="text">{{ item.name }}</p>
            <div class="icon" @click="deleteContentById(item.name,item.id)">
                <el-icon><Close /></el-icon>
            </div>
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {computed, onMounted, ref} from "vue";
import {useStore} from "vuex";
import $bus from '../utils/eventBus'
import router from "@/router";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: `Aside`,
  setup(){
    const store=useStore();
    const keyword=ref('');
    const switchContent=(id)=>{
      store.state.content.currentId=id;
    }
    const contentList=computed(()=>{
      return store.state.content.lists.filter(item=>item.name.indexOf(keyword.value)>=0);
    })
    const anchor=ref({
      current:0,
      last:0
    })
    const scrollerEvent=({scrollTop})=>{
      anchor.value.current=scrollTop;
    }
    const updateLastAnchor=()=>{
      anchor.value.last=anchor.value.current;
    }
    const scrollbarRef = ref(null);
    const choice=(id)=>{
      if(router.currentRoute.value.fullPath!=='/home/content')
        router.push('/home/content');
      switchContent(id);
      updateLastAnchor();
    }
    const add=()=>{
      keyword.value='';
      if(router.currentRoute.value.fullPath!=='/home/content')
        router.push('/home/content');
      store.commit('addContent');
      updateLastAnchor();
    }
    onMounted(()=>{
      $bus.on('focusDirectory',()=>{
        //scrollbarRef.value.setScrollTop(anchor.value.last);
        scrollbarRef.value&&scrollbarRef.value.scrollTo({
          top:anchor.value.last,
          behavior: 'smooth'
        })
      })
    })
    const deleteContentById=(name,id)=>{
      ElMessageBox.confirm(`确认要删除名称为[${name}]的密码库吗？`,'Warning', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
      }).then(()=>{
        store.commit('deleteContentById',{name,id});
        router.push('/home');
        ElMessage.success("删除成功");
      }).catch(()=>{
        ElMessage.info("取消删除");
      })
    }
    return{
      keyword,
      store,
      contentList,
      switchContent,
      anchor,
      updateLastAnchor,
      scrollerEvent,
      scrollbarRef,
      choice,
      add,
      deleteContentById
    }
  }
}
</script>

<style scoped lang="less">
.el-main{
  --el-main-padding:5px !important;
}
.box{
  height: 100%;
}
.header{
  padding-left: 15px;
}
.searchInput{
  margin-top: 12px;
  width: 170px;
}
.content{
  height:calc(100% - 60px);
}
.shadow{
  border-radius: 15px;
  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 25%);
}
.directory {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  /*background: var(--el-color-primary-light-9);*/
  //background-color: rgba(186, 201, 209, 0.8);
  background-color: rgba(241, 242, 246,0.6);
  //color: var(--el-color-primary-dark-2);
  color:rgba(black,0.8);
  width: 150px;
  padding: 0 10px 0 10px;
  cursor: pointer;
  user-select: none;
}
.directory:hover{
  background-image: linear-gradient(135deg,#fce38a,#f38181);
  color: var(--el-color-danger-rgb);
  font-size: large;
}
.text{
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plus{
  background: rgba(#f1f2f6, 0.6);
  margin-top: 0 !important;
  height: 38px !important;
}
.plus:hover{
  background-image: linear-gradient(112deg,#7117ea,#ea6060);
}
.directory .icon{
  display: none;
}
.directory:hover .icon{
  display: block;
  font-size: medium;
}
.icons{
  position: relative;
}
.icon{
  position: absolute;
  top: 2px;
  right: 2px;
}
.icon:hover{
  font-size: large !important;
  color: red;
}

:deep(.el-scrollbar__bar.is-vertical.is-vertical){
  right: -2px !important;
  width: 7px;
}
:deep(.is-vertical .el-scrollbar__thumb){
  background-image: linear-gradient(180deg,#f02fc2,#6094ea) !important;
}
.choice{
  color: var(--el-color-danger-rgb);
  font-size: large;
  background-image: linear-gradient(157deg,#17ead9,#6078ea) !important;
}
</style>
